<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>行政区域信息管理</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/footable/footable.core.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">

    <script type="text/javascript" src="js/jquery.min.js"> </script>

</head>

<body class="gray-bg">
<div class="animated fadeInRight">

    <div class="row">

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>区域信息查看</h5>
                </div>
                <div class="ibox-content">
                    <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
                        <thead>
                        <tr>

                            <th data-toggle="true">单位名称</th>
                            <th>代码</th>
                            <th>级别</th>
                            <th>父区域代码</th>
                        </tr>
                        </thead>
                        <tbody id="box">
                        <!--<tr>-->
                            <!--<td>黑龙江</td>-->
                            <!--<td>1555555</td>-->
                            <!--<td>0</td>-->
                            <!--<td>0</td>-->
                            <!--<td><a onclick="modify(this)"><i class="fa fa-wrench"></i> 修改</a></td>-->
                            <!--<td><a onclick="remove(this)"><i class="fa fa-times"></i> 删除</a></td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td>哈尔滨市</td>-->
                            <!--<td>1500000</td>-->
                            <!--<td>1</td>-->
                            <!--<td>1555555</td>-->
                            <!--<td><a onclick="modify(this)"><i class="fa fa-wrench"></i> 修改</a></td>-->
                            <!--<td><a onclick="remove(this)"><i class="fa fa-times"></i> 删除</a></td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td>道里区</td>-->
                            <!--<td>150010</td>-->
                            <!--<td>2</td>-->
                            <!--<td>1500000</td>-->
                            <!--<td><a onclick="modify(this)"><i class="fa fa-wrench"></i> 修改</a></td>-->
                            <!--<td><a onclick="remove(this)"><i class="fa fa-times"></i> 删除</a></td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td>道dd</td>-->
                            <!--<td>150010</td>-->
                            <!--<td>2</td>-->
                            <!--<td>1500000</td>-->
                            <!--<td><a onclick="modify(this)"><i class="fa fa-wrench"></i> 修改</a></td>-->
                            <!--<td><a onclick="remove(this)"><i class="fa fa-times"></i> 删除</a></td>-->
                        <!--</tr>-->

                        </tbody>

                        <tfoot>
                        <tr>
                            <td colspan="6">
                                <ul class="pagination pull-right"></ul>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>区域信息增加</h5>
                    <!--<div class="ibox-tools">-->
                    <!--<a class="collapse-link">-->
                    <!--<i class="fa fa-chevron-up"></i>-->
                    <!--</a>-->
                    <!--<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">-->
                    <!--<i class="fa fa-wrench"></i>-->
                    <!--</a>-->
                    <!--<ul class="dropdown-menu dropdown-user">-->
                    <!--<li><a href="form_basic.html#">选项1</a>-->
                    <!--</li>-->
                    <!--<li><a href="form_basic.html#">选项2</a>-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--<a class="close-link">-->
                    <!--<i class="fa fa-times"></i>-->
                    <!--</a>-->
                    <!--</div>-->
                </div>
                <div class="ibox-content" class="form-horizontal">
                    <form method="get" class="form-horizontal" action="">

                        <div class="form-group" >
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-6">
                                <input id="name" name="regionName" class="form-control" type="text">
                            </div>
                        </div>

                        <div class="form-group" >
                            <label class="col-sm-2 control-label">代码</label>
                            <div class="col-sm-6">
                                <input id="num" name="regionCode" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">级别</label>
                            <div class="col-sm-6">
                                <input id="level" name="levelCode" class="form-control" required="" aria-required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">父区域代码</label>
                            <div class="col-sm-6">
                                <input type="text" id = "fatherNum" name="pregionCode" class="form-control">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <!--<button class="btn btn-primary" onclick="save()">保存内容</button>-->
                                <button class="btn btn-primary" id="b1">保存内容</button>
                                <button class="btn btn-white" onclick="cancel()">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/footable/footable.all.min.js"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<script type="text/javascript" src="js/regionalManagement.js"></script>
<script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function() {
        $('.footable').footable();

    });

    $("input[name='datetimepicker']").datepicker({
        language:"zh-CN",    //语言选择中文
        format:"yyyy-mm-dd",	//格式化日期
        timepicker:true,     //关闭时间选项
        yearEnd:2050,        //设置最大年份
        todayButton:false,   //关闭选择今天按钮
        autoclose: 1,        //选择完日期后，弹出框自动关闭
        startView:3,         //打开弹出框时，显示到什么格式,3代表月
        minView: 3,          //能选择到的最小日期格式
    });
</script>
<script>
    window.onload=function () {
        var tr=document.getElementsByTagName('tr');
        for(var i=0;i<tr.length;i++){
            if(i%2==0){
                tr[i].style.background='white';
            }

            // tr[i].style.background='white';
        }

    }

</script>
<script>
    //获取
    window.onload=function () {
        ajax('/region',{},'GET',function(str){

           var Obj = eval("("+str+")");

            var otr="";

            for(var i=0;i<Obj.data.length;i++) {
                otr += "<tr ></tr>";
                otr += "<td style='display: none'>" + Obj.data[i].id + "</td>";
                otr += "<td>" + Obj.data[i].regionName + "</td>";
                otr += "<td>" + Obj.data[i].regionCode + "</td>";
                otr += "<td>" + Obj.data[i].levelCode + "</td>";
                otr += "<td>" + Obj.data[i].pregionCode + "</td>";
                otr += "<td>" +'<a class="a1" onclick=xiugai(this)><i class="fa fa-wrench"></i> 修改</a>' +"</td>";
                otr += "<td>" +'<a class="a2" onclick=shanchu(this)><i class="fa fa-wrench"></i> 删除</a>' +"</td>"
                //   onclick=shanchu(this)

            }

            document.getElementsByTagName('tbody')[0].innerHTML= otr;
        },function(){
            alert('链接失败')
        })






    }
    //新增
    var obtn=document.getElementById("b1");
    var rn;
    var rc;
    var lc;
    var pc;

    obtn.onclick=function(){
        rn=document.getElementById("name").value;
        rc=document.getElementById("num").value;
        lc=document.getElementById("level").value;
        pc=document.getElementById("fatherNum").value;

        ajax('/region', {data: [{regionName:rn,
                regionCode:rc,
                levelCode:lc,
                pregionCode:pc}]}, 'POST', console.log)
    }

    //删除

    function shanchu(cell) {
        var tr = cell.parentNode.parentNode;//input --> td --> tr
        var table = document.getElementsByTagName("table")[0];
        ajax('/region', {
                    data: [{
                        id:tr.cells[0].innerHTML
                    }]
                }, 'delete', function () {
                    table.deleteRow(tr.rowIndex)
                }, function () {
                    alert('失败')

                })
    }
//修改
    function xiugai(cell){
        tr = cell.parentNode.parentNode;//input --> td --> tr
        var text = tr.cells[2].innerText;
        //console.log(tr.cells[2].innerText);
        tr.cells[2].innerHTML = '<input id="comment' + tr.rowIndex + '" name="comment"' +
            'class="form-control" aria-required="true">';
        tr.cells[5].innerHTML = '<a onclick="queren(this)"><i class="fa fa-wrench"></i> 确认</a>';
        var comment = document.getElementById("comment" + tr.rowIndex);
        comment.value = text;
    }

        function queren(cell){
        var tr = cell.parentNode.parentNode;//input --> td --> tr
        // console.log(tr.cells[2].innerText);
            var comment=document.getElementById('comment' + tr.rowIndex).value;
            // alert(comment)
        ajax('/region', {data: [{id:tr.cells[0].innerHTML,
                        regionCode:comment
                        }]}, 'PATCH', function () {
            tr.cells[2].innerHTML = comment;
            tr.cells[5].innerHTML = '<a onclick="xiugai(this)"><i class="fa fa-wrench"></i> 修改</a>';
        })
    }




</script>
<script type="text/javascript" src="js/service/service.js"></script>

</script>

<!--统计代码，可删除-->

</body>

</html>
